<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="index.css" />
        <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css//font-awesome.min.css" />
        <title>Puzzle</title>
    </head>

    <body>
        <div id="continer">
            <div id="gameBox">
                <canvas id="canvas" width="516" height="516">您的浏览器不支持canvas</canvas>
            </div>
            <div id="wall"></div>
            <div id="mesBox">
                <div class="preview" title="预览">
                    <canvas id="preview" width="240" height="240"></canvas>
                </div>
                <div class="step">步数：<span id="step">0</span></div>
                <div class="btns">重新开始</div>
                <div class="btns">选择图片</div>
                <div class="btns">选择难度</div>

                <div id="copyRight">
                    <div id="myLoge">DISIGN BY HECHUN</div>
                </div>
            </div>
        </div>

        <!-- 图片选择modal -->
        <div class="modals hide">
            <div class="content">
                <div class="title">
                    <p>选择/上传图片</p>
                    <div class="close">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="body imgbox">
                    <!-- <div
                        class="imgs"
                        style="background: url('/images/bg.png')"
                        data-src="/images/bg.png"
                    ></div> -->
                    <label for="upload" class="imgs upload">
                        <i class="fa fa-cloud-upload" aria-hidden="true"></i>
                        <input id="upload" type="file" accept="image/*" />
                    </label>
                </div>
            </div>
        </div>

        <!-- 难度选择modal -->
        <div class="modals hide">
            <div class="content">
                <div class="title">
                    <p>难度选择</p>
                    <div class="close">
                        <i class="fa fa-times" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="body diffi-wrap">
                    <div class="difficultyPreview">
                        <canvas
                            id="diffiPreview"
                            class="diffiPreview"
                            width="500"
                            height="500"
                            style="width: 500px; height: 500px"
                        ></canvas>
                    </div>
                    <input type="range" class="diffi" value="1" min="1" max="5" data-value="1" />
                </div>
            </div>
        </div>

        <!-- toast -->
        <div class="toast hide">
            <div class="title"></div>
            <div class="content"></div>
        </div>

        <script src="index.js" async></script>
    </body>
</html>
